WordPress ist Drag & Drop, ABER… Deshalb fummele ich immer noch mit HTML herum

Haben Sie sich jemals gefragt, wie Websites tatsächlich funktionieren?

Es mag wie Magie erscheinen, aber hinter jeder Webseite, die Sie sehen, steckt eine Sprache. Diese Sprache heißt HTML.

Betrachten Sie HTML als die grundlegenden Bausteine des Internets.

Schon ein kleines bisschen HTML-Wissen kann Ihr WordPress-Spiel wirklich aufwerten. Ich habe aus erster Hand gesehen, wie es Menschen hilft, ihre WordPress-Websites noch besser zu machen.

In diesem Beitrag erkläre ich, was HTML ist, warum es wichtig ist und wie Sie benutzerdefinierten HTML-Code zu Ihrer WordPress-Site hinzufügen können.

Sie werden vielleicht überrascht sein, wie einfach und hilfreich es für effektives Webdesign sein kann!

Inhaltsverzeichnis

Was ist HTML?

HTML steht für HyperText Markup Language. Im Grunde ist HTML die Sprache, die Webinhalte strukturiert. Betrachten Sie es als das Skelett einer Webseite.

HTML verwendet sogenannte „Tags“. Tags sagen dem Webbrowser, was jeder Teil Ihres Inhalts ist.

Zum Beispiel können Tags dem Browser mitteilen, dass etwas eine Überschrift, ein Absatz oder ein Bild ist. Browser lesen diese Tags, um Webseiten so anzuzeigen, wie sie aussehen sollen.

HTML ist keine Programmiersprache. Es ist eher eine Möglichkeit, Informationen so zu organisieren, dass Browser sie verstehen können.

Warum sollten Sie sich für HTML in WordPress interessieren?

WordPress ist super einfach zu bedienen. Sie können eine ganze Website erstellen, ohne Code zu kennen. Warum also mit HTML herumschlagen?

Nun, HTML gibt Ihnen mehr Kontrolle über Ihre Inhalte. Manchmal reicht der normale WordPress-Editor einfach nicht aus.

Sagen wir, Sie möchten einem Bild ein bestimmtes Attribut hinzufügen. Oder vielleicht möchten Sie einen wirklich einzigartigen Listenstil erstellen. Mit HTML können Sie solche Dinge tun.

HTML ist auch ein Lebensretter für die Fehlerbehebung.

Hatten Sie jemals ein seltsames Formatierungsproblem in WordPress? Ein Blick auf das HTML kann Ihnen helfen, das Problem schnell zu finden und zu beheben. Es ist viel schneller, als mit dem visuellen Editor zu raten.

Außerdem bietet HTML Flexibilität. Möchten Sie erweiterte Anpassungen hinzufügen? Wie benutzerdefinierte Klassen für Styling oder komplexere Layouts? HTML eröffnet diese Möglichkeiten.

Und hier ist ein wichtiger Punkt: Zukunftssicherheit.

WordPress ändert sich ständig. Aber HTML? Es ist eine grundlegende Web-Fähigkeit, die immer nützlich sein wird.

Ich habe es immer wieder gesehen – das Verständnis von HTML macht dich in der Web-Welt viel anpassungsfähiger.

HTML 101: Die Grundlagen

Lass uns über die Bausteine von HTML sprechen. Sie werden Tags genannt.

Tags sind Anweisungen, die dem Browser sagen, was er mit deinem Inhalt tun soll. Die meisten Tags kommen paarweise: ein öffnender Tag und ein schließender Tag.

Wenn du zum Beispiel einen Absatz erstellen möchtest, verwendest du den <p>-Tag, um ihn zu beginnen, und </p>, um ihn zu beenden.

Siehst du den Schrägstrich im schließenden Tag? Daran erkennst du, dass es das Ende ist.

Schauen wir uns einige gängige HTML-Tags an, die du oft verwenden wirst:

Überschriften sind für Titel und Untertitel. Es gibt <h1>, <h2>, <h3>, <h4>, <h5> und <h6>.

<h1> ist die wichtigste Überschrift (normalerweise der Haupttitel) und <h6> die am wenigsten wichtige.

Links sind das, was das Web, nun ja, zu einem Web macht! Der <a>-Tag erstellt Links. <a> steht für Anker.

Möchtest du Bilder anzeigen? Der <img>-Tag ist dein Freund. <img> ist kurz für Bild.

Möchtest du eine Liste von Dingen erstellen? HTML hat dich abgedeckt. Es gibt zwei Haupttypen:

• <ul> für unsortierte Listen (Aufzählungszeichen). „ul“ steht für „unordered list“ (unsortierte Liste).
• <ol> für sortierte Listen (nummerierte Listen). „ol“ steht für „ordered list“ (sortierte Liste).

Und innerhalb von sowohl <ul> als auch <ol> verwendest du <li>-Tags für jedes Element in der Liste. „li“ steht für „list item“ (Listenelement).

Tags können auch Attribute haben. Attribute liefern zusätzliche Informationen über einen Tag.

Zum Beispiel benötigt der <a>-Tag ein href-Attribut, um ihm mitzuteilen, wohin er verlinken soll. So: <a href="https://example.com">Link-Text</a>. Das href-Attribut enthält die Webadresse.

Und der <img>-Tag benötigt ein src-Attribut, um ihm mitzuteilen, wo die Bilddatei zu finden ist. Er sollte auch ein alt-Attribut für „alternativen Text“ haben, was wichtig ist, wenn das Bild nicht geladen werden kann oder für die Barrierefreiheit.

So: <img src="bild.jpg" alt="Beschreibender Text">.

Hier ist ein super einfaches Beispiel für HTML in Aktion:

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

Dieser Code würde eine Hauptüberschrift, einen Absatz und einen Link auf einer Webseite erstellen.

Als ich anfing, HTML zu lernen, waren diese grundlegenden Tags mein Ausgangspunkt. Und ehrlich gesagt? Sie sind immer noch die Grundlage für fast alles, was ich online tue. Diese einfachen Tags sind mächtig!

HTML in Aktion: Praktische Beispiele

Wie kannst du also HTML in WordPress verwenden? Schauen wir uns einige Beispiele an.

Möchtest du Text fett oder kursiv machen? HTML kann das.

Verwende <strong> und </strong>-Tags, um Text fett zu machen. Oder verwende <b> und </b>-Tags, sie machen Text ebenfalls fett.

So geht's: <strong>Dieser Text ist fett</strong>.

Für Kursivschrift verwenden Sie <em> oder <i>. So geht's: <em>Dieser Text ist kursiv</em>.

Diese Tags helfen Ihnen, Wörter und Sätze in Ihren Inhalten hervorzuheben.

Wir haben über das <a>-Tag gesprochen. Sie können es verwenden, um auf andere Seiten Ihrer Website oder auf andere Websites zu verlinken.

Sie können Text, Bilder oder sogar Schaltflächen verlinken. Alles, was Sie tun müssen, ist, das <a>-Tag mit dem richtigen href-Attribut zu verwenden.

Möchten Sie ein YouTube- oder Vimeo-Video zu Ihrer WordPress-Website hinzufügen? Die meisten Videoplattformen stellen Ihnen Einbettungscodes zur Verfügung. Diese Codes sind normalerweise HTML und verwenden oft <iframe>-Tags.

Kopieren Sie einfach den Einbettungscode von YouTube (oder wo auch immer Ihr Video gehostet wird) und fügen Sie ihn in WordPress ein. WordPress weiß, was damit zu tun ist.

Benötigen Sie eine Aufzählungsliste? Verwenden Sie <ul>-Tags. Für eine nummerierte Liste verwenden Sie <ol>- und <li>-Tags.

Möchten Sie eine Linie hinzufügen, um Abschnitte Ihres Inhalts zu trennen? Das <hr>-Tag erstellt eine horizontale Linie. Es ist eine einfache Möglichkeit, Ihren Text visuell zu unterteilen.

Dies sind nur einige Beispiele, aber Sie können sehen, wie nützlich HTML in WordPress sein kann. Es geht darum, Ihren Website-Inhalten etwas Struktur und zusätzliche Funktionalität zu verleihen.

Wie man WordPress-HTML lernt

Sie denken also: „Okay, HTML klingt nützlich, aber wie lerne ich es?“ Gute Frage! Glücklicherweise gibt es unzählige großartige Ressourcen.

Hier sind einige Orte, an denen Sie sofort mit dem Erlernen von HTML beginnen können.

MDN Web Docs ist wie die Enzyklopädie der Webentwicklung. Sie wird von Mozilla (den Machern von Firefox) erstellt und ist äußerst umfassend und zuverlässig.

Wenn Sie interaktives Lernen mögen, ist Codecademy großartig. Sie bieten Kurse an, in denen Sie tatsächlich Code direkt in Ihrem Browser schreiben.

W3schools ist eine beliebte Website für Tutorials zur Webentwicklung. Sie bietet unzählige HTML-Beispiele und Referenzen.

Möchten Sie sehen, wie HTML speziell in WordPress verwendet wird? Schauen Sie sich die offizielle WordPress-Entwicklerdokumentation an. Sie ist etwas technischer, aber eine großartige Ressource, wenn Sie sich wohler fühlen.

Unabhängig davon, welche Ressource Sie wählen, ist Übung am wichtigsten. Ernsthaft. Sie werden HTML nicht nur durch Lesen lernen. Sie müssen Code schreiben und sehen, was passiert.

Experimentieren Sie! Haben Sie keine Angst, Dinge kaputt zu machen. So lernt man.

HTML in WordPress verwenden

Es gibt eine Reihe von Möglichkeiten, HTML in WordPress zu verwenden. Gehen wir sie einzeln durch.

1. Fügen Sie einen benutzerdefinierten HTML-Block im Block-Editor hinzu

Wenn Sie den Block-Editor (Gutenberg) in WordPress verwenden, können Sie einen speziellen Block nur für HTML verwenden. Er heißt „Benutzerdefinierter HTML-Block“.

Um ihn zu verwenden, fügen Sie einfach einen neuen Block zu Ihrer WordPress-Seite oder Ihrem Beitrag hinzu. Suchen Sie im Block-Suchfeld nach „HTML“. Sie sehen, dass der benutzerdefinierte HTML-Block erscheint.

Klicken Sie darauf, um ihn zu Ihren Inhalten hinzuzufügen. Es ist genau wie das Hinzufügen eines beliebigen anderen Blocks. Sie können ihn sogar per Drag & Drop verschieben, wohin Sie möchten.

Sobald Sie den Block hinzufügen, sehen Sie ein Feld, in das Sie Ihren WordPress-HTML-Code eingeben oder einfügen können. Fügen Sie Ihren HTML-Code einfach dort ein.

Klicken Sie auf Vorschau, um zu sehen, wie Ihr HTML-Code auf der Seite aussieht, ohne ihn tatsächlich zu veröffentlichen.

Das ist sehr praktisch, um Ihren Code zu überprüfen.

2. Bearbeiten Sie einen Block in HTML

Wussten Sie, dass Sie jeden WordPress-Block als HTML bearbeiten können? Ja, sogar die normalen Absatzblöcke.

Das ist nützlich, wenn Sie kleine HTML-Anpassungen an einem vorhandenen Block vornehmen möchten.

Klicken Sie zuerst auf den Block, den Sie bearbeiten möchten. Suchen Sie dann nach den drei Punkten in der Werkzeugleiste des Blocks. Klicken Sie darauf.

Ein Menü wird angezeigt. Klicken Sie in diesem Menü auf die Schaltfläche Als HTML bearbeiten.

Plötzlich verwandelt sich der Block! Anstelle des üblichen visuellen Editors sehen Sie den benutzerdefinierten HTML-Code für diesen Block. Jetzt können Sie das HTML direkt bearbeiten.

Das ist großartig für kleine Anpassungen. Vielleicht möchten Sie einer Absatz einen bestimmten Klasse für späteres Styling hinzufügen. Oder vielleicht müssen Sie ein kleines Formatierungsproblem beheben, das in HTML einfacher zu handhaben ist.

Wenn Sie mit der HTML-Bearbeitung fertig sind, können Sie in der Block-Werkzeugleiste auf Visuell bearbeiten klicken, um zur normalen visuellen Editoransicht zurückzukehren.

3. Verwenden Sie den Code-Editor in Gutenberg

Für diejenigen, die sich mit Code auskennen, bietet der WordPress-Block-Editor eine vollständige Code-Editor-Ansicht. Diese zeigt Ihnen den HTML-Code für Ihren gesamten Beitrag oder Ihre gesamte Seite.

Um zum Code-Editor zu wechseln, schauen Sie oben rechts auf Ihrem Gutenberg-Editor-Bildschirm. Dort sehen Sie ebenfalls drei Punkte – das Hauptoptionsmenü für den gesamten Editor. Klicken Sie auf diese Punkte.

In diesem Menü sehen Sie eine Option namens Code-Editor. Klicken Sie darauf.

Sie sehen die Tags und die Struktur Ihrer gesamten Seite im Code dargestellt.

Dieser WordPress-HTML-Editor ist wirklich für fortgeschrittene Benutzer gedacht, die direkt in Code arbeiten möchten. Wenn Sie gerne programmieren und die HTML-Struktur Ihrer Seite im Gesamtbild sehen möchten, ist der Code-Editor genau das Richtige für Sie.

Aber seien Sie vorsichtig! Wenn Sie Fehler im HTML machen, könnten Sie das Layout Ihrer Seite durcheinander bringen. Es ist wichtig, HTML zu verstehen, wenn Sie den Code-Editor ausgiebig nutzen möchten.

Wenn Sie zum normalen visuellen Editor zurückkehren möchten, gehen Sie einfach zurück zu diesem Menü oben rechts und klicken Sie auf Visueller Editor.

4. Fügen Sie HTML mit dem klassischen Editor hinzu

Der klassische WordPress-Editor hat zwei Tabs: Visuell und Text. Im Text-Tab können Sie den Code bearbeiten.

Wenn Sie auf Text klicken, sehen Sie den gesamten HTML-Code für Ihren Beitrag. Hier können Sie HTML-Code direkt schreiben oder einfügen.

Nachdem Sie Ihren HTML-Code hinzugefügt oder bearbeitet haben, können Sie zurück zum Visuell-Tab wechseln, um zu sehen, wie er aussieht. Er zeigt Ihnen die gerenderte Version Ihres HTMLs.

5. Verwenden Sie ein WordPress-Code-Snippet-Plugin

Manchmal möchten Sie kleine Teile von HTML, CSS oder JavaScript zu Ihrer WordPress-Website hinzufügen. Vielleicht möchten Sie einen benutzerdefinierten Tracking-Code hinzufügen oder einen speziellen Stil für einen bestimmten Teil Ihrer Website.

Sie könnten Ihre Theme-Dateien bearbeiten, um dies zu tun, aber das kann riskant sein. Und wenn Ihr Theme aktualisiert wird, könnten Ihre Änderungen überschrieben werden.

Hier kommen Code-Snippets-Plugins ins Spiel. Diese Plugins ermöglichen es Ihnen, Code-Snippets direkt über Ihr WordPress-Dashboard hinzuzufügen.

Sie halten Ihren Code organisiert und getrennt von Ihren Theme-Dateien. Das ist viel sicherer und einfacher zu verwalten, besonders wenn Sie kein Code-Experte sind.

Bevor Sie Code-Schnipsel hinzufügen, ist es immer eine gute Idee, ein Backup Ihrer Website zu erstellen! Wenn mit Ihrem Code etwas schiefgeht, möchten Sie Ihre Website einfach wiederherstellen können.

Duplicator ist ein Plugin, das die Erstellung vollständiger Backups Ihrer WordPress-Website extrem einfach macht. Ich empfehle immer, ein Backup zu erstellen, bevor Sie Codeänderungen vornehmen.

Mein Lieblings-Plugin für Code-Schnipsel ist WPCode (früher „Insert Headers and Footers“). Dieses Tool ermöglicht es Ihnen, HTML, CSS und JavaScript zu Ihrer Website hinzuzufügen.

Außerdem gibt es unzählige vorgefertigte Schnipsel, die Sie verwenden können, wenn Sie nicht an das Programmieren gewöhnt sind.

Die Verwendung eines Code-Schnipsel-Plugins ist viel sicherer als die direkte Bearbeitung von Theme-Dateien. Außerdem ist es einfacher, Ihren benutzerdefinierten Code im Auge zu behalten.

6. Fügen Sie HTML in WordPress-Widgets hinzu

WordPress verfügt über ein integriertes Widget namens für benutzerdefiniertes HTML. Um es zu finden, gehen Sie zu Ihrem WordPress-Dashboard und klicken Sie auf Design und dann auf Widgets.

Sie sehen verschiedene Widget-Bereiche, wie z. B. Seitenleiste oder Fußzeile. Diese hängen von Ihrem WordPress-Theme ab.

Fügen Sie das benutzerdefinierte HTML-Widget in den Widget-Bereich ein, in dem Sie Ihr HTML hinzufügen möchten.

Geben Sie Ihr HTML direkt in dieses Feld ein oder fügen Sie es dort ein.

Mit HTML in Widgets können Sie alle möglichen Dinge hinzufügen. Benutzerdefinierter Text, Bilder, Links, sogar Einbettungscodes – alles funktioniert!

Nachdem Sie Ihr HTML hinzugefügt haben, klicken Sie in den Widget-Einstellungen auf die Schaltfläche Aktualisieren.

Das war's! Ihr HTML wird nun in diesem Widget-Bereich auf Ihrer Website live geschaltet.

7. Bearbeiten Sie HTML in WordPress-Themes

Sie können tatsächlich direkt in die Dateien Ihres WordPress-Themes gehen und das HTML dort bearbeiten. Dies gibt Ihnen viel Kontrolle über die Struktur Ihrer Website, birgt aber auch große Risiken.

Die direkte Bearbeitung von Theme-Dateien kann Ihre Website beschädigen, wenn Sie nicht vorsichtig sind. Ein kleiner Fehler im Code kann zu größeren Problemen führen.

Wenn Sie Theme-Dateien bearbeiten möchten, empfehle ich immer die Verwendung eines Child-Themes. Ein Child-Theme ist wie eine sichere Kopie Ihres Haupt-Themes, in der Sie sicher Änderungen vornehmen können. Auf diese Weise werden Ihre Änderungen nicht überschrieben, wenn Ihr Haupt-Theme aktualisiert wird.

Okay, Warnungen beiseite, hier ist, wie Sie Theme-Dateien bearbeiten können. Gehen Sie in Ihrem WordPress-Dashboard zu Design und dann zu Theme-Datei-Editor (manchmal auch nur Theme-Editor genannt).

Auf der rechten Seite sehen Sie eine Liste Ihrer Theme-Dateien. Diese Dateien steuern die Struktur und das Layout Ihrer Website.

Einige gängige Dateien, die HTML enthalten, sind:

• header.php: Diese Datei steuert normalerweise den obersten Teil Ihrer Website – den Header-Bereich.
• footer.php: Diese Datei steuert den untersten Teil – den Footer-Bereich.
• sidebar.php: Wenn Ihr Theme eine Seitenleiste hat, steuert diese Datei sie.
• index.php: Dies ist oft die Hauptseite Ihrer Website, die Ihre Blogbeiträge anzeigt.
• single.php: Dies steuert, wie einzelne Blogbeiträge angezeigt werden.
• page.php: Dies steuert, wie normale Seiten (wie „Über uns“ oder „Kontakt“) angezeigt werden.
• Template-Dateien: Ihr Theme hat möglicherweise andere Template-Dateien für verschiedene Seitentypen.

Sie können das HTML direkt im Theme-Dateieditor bearbeiten. Klicken Sie einfach auf eine Datei, um sie zu öffnen, suchen Sie das HTML, das Sie ändern möchten, und nehmen Sie Ihre Änderungen vor. Klicken Sie dann auf Datei aktualisieren, um Ihre Änderungen zu speichern.

Denken Sie daran: Bearbeiten Sie Theme-Dateien nur, wenn Sie wirklich wissen, was Sie tun, und verwenden Sie immer ein Child-Theme und haben Sie ein Backup.

Meiner Erfahrung nach bearbeite ich Theme-Dateien nur für sehr spezifische Anpassungen, die auf andere Weise nicht möglich sind. Und selbst dann bin ich äußerst vorsichtig. Child-Themes und Duplicator-Backups sind immer Teil meines Workflows, wenn ich an Theme-Dateien arbeite.

8. Verwenden Sie FTP, um WordPress-HTML zu bearbeiten

FTP steht für File Transfer Protocol. Es gibt Ihnen den direktesten Zugriff auf die Bearbeitung Ihrer WordPress-Theme-Dateien (und auch anderer Dateien).

Um FTP zu verwenden, benötigen Sie einige Dinge:

• Einen FTP-Client: Dies ist eine Software, mit der Sie sich mit Ihrem Server verbinden können. Beliebte FTP-Clients sind FileZilla, Cyberduck und Transmit.
• FTP-Zugangsdaten: Diese erhalten Sie von Ihrem Webhosting-Anbieter. Sie umfassen normalerweise Ihren FTP-Host, Benutzernamen, Passwort und Portnummer.

Wenn Sie Ihre FTP-Zugangsdaten nicht finden können, überprüfen Sie die Einstellungen Ihres Hosting-Kontos oder wenden Sie sich an den Support.

Sobald Sie diese haben, öffnen Sie Ihren FTP-Client und geben Sie Ihre FTP-Zugangsdaten ein, um sich mit Ihrem Server zu verbinden.

Nachdem Sie sich verbunden haben, sehen Sie eine Ansicht mit zwei Seiten. Eine Seite zeigt die Dateien auf Ihrem Computer und die andere Seite zeigt die Dateien auf Ihrem Webserver.

Navigieren Sie auf der Serverseite zu Ihren WordPress-Theme-Dateien. Der Pfad lautet normalerweise etwa /wp-content/themes/ihr-theme-name/.

Sobald Sie ein Backup haben und sich über FTP in Ihrem Theme-Ordner befinden, können Sie die Theme-HTML-Dateien auf Ihren Computer herunterladen oder sie direkt bearbeiten.

Klicken Sie einfach mit der rechten Maustaste auf die Datei in Ihrem FTP-Client und wählen Sie Herunterladen oder Anzeigen/Bearbeiten.

Bearbeiten Sie nun die heruntergeladene Datei auf Ihrem Computer mit einem Code-Editor. Gute Code-Editoren dafür sind VS Code, Sublime Text, Atom oder Notepad++.

Öffnen Sie die Datei in Ihrem Code-Editor und nehmen Sie Ihre HTML-Änderungen vor.

Sobald Sie mit dem Hinzufügen von HTML fertig sind, speichern Sie die Datei. Klicken Sie mit der rechten Maustaste auf die Datei in Ihrem FTP-Client und wählen Sie Hochladen. Dadurch wird die Originaldatei auf Ihrem Server mit Ihrer bearbeiteten Version überschrieben.

FTP ist ein mächtiges Werkzeug, erfordert aber etwas technisches Know-how. Und es ist wichtig, verantwortungsbewusst damit umzugehen. Überprüfen Sie Ihre Änderungen immer doppelt, bevor Sie sie hochladen, und haben Sie immer ein Backup bereit.

Häufig gestellte Fragen (FAQs)

Abschließende Gedanken

Schon ein wenig HTML zu lernen, kann eine neue Welt voller Möglichkeiten mit WordPress eröffnen. Es gibt Ihnen mehr Kontrolle, mehr Flexibilität und ein tieferes Verständnis dafür, wie Webseiten tatsächlich funktionieren.

Haben Sie keine Angst, weiter zu lernen und zu experimentieren. Je mehr Sie mit Code spielen, desto wohler werden Sie sich fühlen.

Erkunden Sie die Ressourcen, die ich erwähnt habe, probieren Sie die verschiedenen Möglichkeiten aus, HTML in WordPress einzufügen, und sehen Sie einfach, was Sie erstellen können!

Und denken Sie daran, sichern Sie Ihre Website immer, bevor Sie große Änderungen vornehmen! Tools wie Duplicator machen Backups zum Kinderspiel und können Ihnen später viel Ärger ersparen.

Während Sie hier sind, werden Ihnen wahrscheinlich auch diese anderen WordPress-Anleitungen gefallen:

• Vergessen Sie, was Sie über WordPress-Code-Editoren wissen – probieren Sie stattdessen diesen aus
• 15 beste No-Code-Tools für WordPress
• Entwickeln Sie intelligenter, nicht härter: WordPress-Entwicklertools für jeden Profi
• So verwenden Sie die WordPress CLI: Beherrschen Sie die Kommandozeile
• Wie lange dauert es, WordPress zu lernen?